<template>
  <div class="fee-adjustment">
    <h3>调整费用用款单</h3>
    <div class="notice">
      <el-tag type="info" effect="dark" size="small">
        <el-icon><information /></el-icon>
        仅安保保洁福利、第三方公司对客类采购费用，除此无其他！
      </el-tag>
    </div>

    <!-- 房费区域 -->
    <el-card shadow="hover" class="fee-card">
      <template #header>
        <div class="card-header">
          房费
          <span class="fee-meta">房外：2 小计：2000.00 元</span>
        </div>
      </template>
      <div class="fee-item">
        <div class="fee-detail">
          <span>账单编号：ZJD2048101020000001</span>
          <el-link type="primary" size="small">查看明细</el-link>
        </div>
        <p>账单日期：2048-10</p>
        <p>可退金额：2000.00 元</p>
        <p>实收金额：2000.00 元</p>
        <p>退房预计：12 天</p>
        <p>调整备注：<input type="text" placeholder="请输入" class="remark-input" /></p>
      </div>
      <div class="fee-item">
        <div class="fee-detail">
          <span>账单编号：ZJD2048101020000002</span>
          <el-link type="primary" size="small">查看明细</el-link>
        </div>
        <p>护理员名称：王涛清</p>
        <p>可退金额：200.00 元</p>
      </div>
    </el-card>

    <!-- 杂费区域 -->
    <el-card shadow="hover" class="fee-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          杂费
          <span class="fee-meta">房外：3 小计：6000.00 元</span>
        </div>
      </template>
      <div v-for="(item, index) in miscellaneousFees" :key="index" class="fee-item">
        <div class="fee-detail">
          <span>账单编号：{{ item.billNo }}</span>
          <el-link type="primary" size="small">查看明细</el-link>
        </div>
        <p>账单日期：{{ item.date }}</p>
        <p>应付金额：{{ item.amount }} 元</p>
      </div>
    </el-card>

    <!-- 押金区域 -->
    <el-card shadow="hover" class="fee-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          押金
          <span class="fee-meta">小计：4000.00 元</span>
        </div>
      </template>
      <div class="fee-item">
        <p>可退押金：2000.00 元</p>
        <p>实收金额：2000.00 元</p>
        <p>调整备注：床头柜丢失，扣除200</p>
        <p>预缴费：2000.00 元</p>
      </div>
    </el-card>

    <div class="total-notice">
      <el-tag type="danger" effect="dark" size="small">
        <el-icon><warning /></el-icon>
        最终退款金额=房费+杂费+押金-210.00 元
      </el-tag>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const miscellaneousFees = ref([
  { billNo: 'ZJD2048101020000003', date: '2048-10', amount: '2000.00' },
  { billNo: 'ZJD2048101020000004', date: '2048-10', amount: '2000.00' },
  { billNo: 'ZJD2048101020000005', date: '2048-10', amount: '2000.00' },
  { billNo: 'ZJD2048101020000006', nurseName: '王涛清', amount: '200.00' },
  { billNo: 'ZJD2048101020000007', nurseName: '王涛清', amount: '200.00' },
  { billNo: 'ZJD2048101020000008', nurseName: '王涛清', amount: '200.00' }
]);
</script>

<style scoped>
.fee-adjustment {
  max-width: 800px;
  margin: 20px auto;
}
.notice {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.step-tag {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #ff6b6b;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 14px;
}
.fee-meta {
  font-size: 14px;
  color: #606266;
}
.fee-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.fee-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.remark-input {
  width: 200px;
  padding: 4px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}
.total-notice {
  margin-top: 20px;
}
</style>